<template>
  <view>
    <!-- 顶部蓝色区域 -->
    <view class="top"></view>
    
    <!-- 主要内容区域 -->
    <view class="bottom">
      <!-- 汽车列表（用原生radio-group） -->
      <view class="carlist">
        <radio-group @change="onRadioChange" :value="selectedCarId">
          <view class="caritem" v-for="car in carList" :key="car.id">
            <view class="carimage">
              <image :src="car.image" mode=""></image>
            </view>
            <view class="carinfo">
              <view class="carmodels">
                车型：{{ car.brand }}{{ car.model }}
              </view>
              <view class="carlicense">
                车牌：{{ car.plateNumber }}
              </view>
            </view>
            <view class="choose">
              <!-- 原生radio组件，name对应car.id -->
              <radio :value="car.id" color="#1f73f1" />
            </view>
          </view>
        </radio-group>
      </view>
      
      <!-- 确认选择按钮 -->
      <view class="confirm-btn" @click="confirmChooseVehicle">
        确认选择
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedCarId: '1', // 当前选中的汽车ID
      carList: [
        {
          id: '1',
          brand: '奔驰',
          model: 'E300',
          plateNumber: '沪AZRZN（哲然最牛）',
          image: '/static/奔驰e300.jpeg'
        },
        {
          id: '2',
          brand: '宝马',
          model: '530Li',
          plateNumber: '京A88888',
          image: '/static/奔驰e300.jpeg'
        },
        {
          id: '3',
          brand: '奥迪',
          model: 'A6L',
          plateNumber: '粤B99999',
          image: '/static/奔驰e300.jpeg'
        }
      ]
    }
  },
  methods: {
    // 监听单选框变化（原生radio-group的change事件）
    onRadioChange(e) {
      this.selectedCarId = e.detail.value; // 更新选中的ID
    },
    
    // 确认选择并回传数据
    confirmChooseVehicle() {
      const selectedCar = this.carList.find(car => car.id === this.selectedCarId);
      if (!selectedCar) {
        uni.showToast({ title: "请选择一辆汽车", icon: "none" });
        return;
      }
      
      // 回传数据到上一页（和之前逻辑一致）
      const pages = getCurrentPages();
      if (pages.length < 2) return;
      const prevPage = pages[pages.length - 2];
      prevPage.$vm.carInfo = selectedCar;
      
      uni.navigateBack({
        delta: 1,
        success: () => {
          uni.showToast({ title: "汽车选择成功", icon: "success" });
        }
      });
    }
  }
}
</script>

<style scoped>
/* 样式和之前保持一致，仅调整radio的外观（可选） */
.top{
	height: 30rpx;
	 background-color: #1f73f1;
	  }
.bottom{
	padding: 20rpx;
	 background-color: #f8f8f8;
	  min-height: 80vh;
	   }
.carlist{ 
	margin-bottom: 120rpx;
	}
.caritem{
  display: flex; 
  align-items: center;
  background-color: #ffffff;
  height: 200rpx;
  padding: 40rpx;
  border-radius: 30rpx;
  margin-bottom: 40rpx; /* 保留下方间距，保证列表项间隔 */
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}
.carimage{ 
	width: 180rpx; 
	height: 180rpx;
	 }
.carimage image{
	width: 180rpx;
	 height: 180rpx;
	  border-radius: 100%; 
	  }
.carinfo{
	margin-left:40rpx; 
	flex: 1; 
	}
.carmodels{
	font-size: 35rpx;
	 color: #333;
	  margin-bottom: 20rpx;
	   font-weight: 500;
		}
.carlicense{ 
	font-size: 30rpx;
	 color: #666; 
	 }
.choose{
	margin-left: 20rpx; 
	}
.confirm-btn {
  position: fixed;
   bottom: 30rpx;
	left: 20rpx;
	 right: 20rpx;
  height: 90rpx; 
  line-height: 90rpx;
   background-color: #1f73f1;
  color: #fff; 
  font-size: 32rpx;
   text-align: center;
	border-radius: 50rpx;
  box-shadow: 0 4rpx 20rpx rgba(31, 115, 241, 0.3);
}
.confirm-btn:active {
	background-color: #1a5cc7;
	 transform: scale(0.98);
	  }

/* 原生radio选中颜色（已通过color属性设置，这里可选） */
radio .wx-radio-input.wx-radio-input-checked {
  border-color: #1f73f1 !important;
  background-color: #1f73f1 !important;
}
</style>
